<template>
  <rx-dialog @handOk="handleOk" @cancel="cancel">
    <div class="flexBoxs">
      <div class="top">
        <div class="left">
          <header>{{i18n('pane.field','字段')}}</header>
          <div class="fieldContainer">
            <div>{{i18n('pane.excelField','EXCEL字段')}}</div>
            <a-select style="width: 100%;" allowClear :options="mainFields" @change="insert"></a-select>
          </div>
        </div>
        <div class="contents">
          <header>{{i18n('pane.character','运算符')}}</header>
          <div class="operatorContainer" style="height:170px">
            <div @click="insert('+')">+</div>
            <div @click="insert('-')">-</div>
            <div @click="insert('*')">*</div>
            <div @click="insert('/')">/</div>
            <div @click="insert('()')">()</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <a-textarea style="height: 100%;resize: none;" v-model="valueData"></a-textarea>
      </div>
    </div>
  </rx-dialog>
</template>

<script>
  import {RxDialog, Util, RxLayout} from "@lowcode/jpaas-common-lib"
  import FormBoEntityApi from "@/api/form/bo/formBoEntity"
  import FormDbApi from "@/api/form/bo/formDb"

  export default {
    name: "FormTableFormulaScript",
    props: ["layerid", "destroy", "value", "fieldName", "headerContent", ],
    components: {
      RxDialog,
      RxLayout
    },
    data() {
      return {
        valueData: "",
        mainFields: [],
        subFields: []
      }
    },
    created() {
      this.init();
    },
    methods: {
      i18n(name,text,key){
        return this.$ti18(name,text,"ImportExcel",key);
      },
      init() {
        if (this.value) {
          this.valueData = this.value;
        }

        this.getCombFields(this.dsName, this.tableName, "mainFields");
      },

      getCombFields(dsName, tableName, ctlId) {
        var self = this;
        for(let i = 0; i < this.headerContent.length; i++) {
          var node = {
            label:this.headerContent[i],
            value:this.headerContent[i],
          }
          self[ctlId][i]= node;
        }
        // FormDbApi.getByName("dsName=" + this.dsName + "&tbName=" + tableName).then(data => {
        //   self[ctlId] = data.columnList.map(item => {
        //     return {label: item.comment, value: item.fieldName}
        //   })
        // })
      },
      getData() {
        return this.valueData;
      },
      handleOk() {
        Util.closeWindow(this, "ok", this.getData());
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      },
      insert(text) {
        if (text) {
          this.valueData += text;
        }
      }
    }
  }
</script>

<style scoped>
  fieldset {
    height: 100%;
    border: 1px solid silver;
  }

  fieldset legend {
    font-weight: bold;
  }

  div.operatorContainer {
    padding: 5px;
    text-align: left;
    overflow: auto;
    margin-top: 6px;
  }
  div.operatorContainer > div {
    border-radius: 5px;
    border: 1px solid silver;
    display: inline-block;
    text-align: center;
    margin: 4px;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 10px;
    cursor: pointer;
    background: #f0f2f5;
  }

  div.operatorContainer > div:hover {
    background: white;
  }

  div.fieldContainer {
    padding:0 10px;
    text-align: left;
    overflow: auto;
  }
  div.fieldContainer>div{
    padding: 10px 0;
  }

  .flexBoxs{
    display: flex;
    width: 100%;
    height: 100%;
    background: #f0f2f5;
    flex-direction: column;
    box-sizing: border-box;
  }
  .flexBoxs .bottom{
    flex: 1;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .top{
    display: flex;
    margin-bottom: 10px;
    height: 250px;
  }
  .top header{

  }
  .top header:before{
    content: '';
    width: 3px;
    height: 13px;
    display: inline-block;
    background: #4D9EFF;
    margin-right: 8px;
    vertical-align: -2px;
  }
  .top .contents{
    flex: 1 ;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .top .left{
    width:300px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-right: 10px;
    box-sizing: border-box;
    box-sizing: border-box;
  }
</style>